<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="./css/bootstrap.css" type="text/css" rel="stylesheet">

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios-0.18.0.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        .tablestyle{
            padding: 20px;
            width: 400px;

        }
        .tablestyle th{
            text-align:left;
        }
        .tablestyle td{
            text-align:left;
        }
    </style>
</head>
<body>
<div class="rbody" id="app">
    <div class="top">
        当前位置：案例管理<i class="fa fa-fw fa-angle-right"></i>添加案例
    </div>
</div>
<div class="tablestyle">
    <form action="" method="post" enctype="multipart/form-data">
        <table border="1px" style="border-collapse: collapse" class="table table-bordered">
            <tr>
                <td>标题</td>
                <td>
                    <input type="text" class="form-control" id="tsutitle" placeholder="标题" v-model="tstitle">
                </td>
            </tr>
            <tr>
                <td>内容</td>
                <td>
                    <textarea class="form-control" rows="6" placeholder="请输入内容" v-model="tscontent"></textarea>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" name="logoImage" @change="getFile($event)"/>
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input class="btn btn-default" type="submit" value="提交" @click="submitForm($event)"/>
                </td>
                <td align="left">
                    <input class="btn btn-default" type="reset" value="重置" @click="cz();"/>
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
    var add=new Vue({
        el:'.tablestyle',//作用域
        data:{
            tstitle:'',//数据
            tscontent:'',
            file:''
        },
        methods:{
            cz:function(){
                add.tstitle="";
                add.tscontent="";
            },
            getFile(event) {
                this.file = event.target.files[0];
                //console.log(this.file);
                alert("上传");
            },
            submitForm(event) {
                //event.preventDefault();

                let formData = new FormData();
                formData.append('tstitle', this.tstitle);
                formData.append('tscontent', this.tscontent);
                formData.append('file', this.file);

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                //servlet名字为uploadfile
                axios.post("./uploadfile",formData,config).then((res)=>{
                    alert("添加成功！");
                    // success callback
                }).catch((err)=>{
                    alert("添加失败！");
                });
            }
        }
    });

</script>
</body>
</html>